<template>
<div class="app">
    <div class="box" v-on:keyup.13="chackinp(form)">
        <el-button :plain="true" style="display:none" @click="open2"></el-button>
        <el-button :plain="true" style="display:none" @click="open4"></el-button>
        <el-form status-icon ref="form" :rules="chackform" class="form-box" :model="form" label-width="80px">
            <img src="../assets/img/logo_index.png" alt="">

              <el-form-item style="margin-left:-80px" prop="mobile">
                 <el-input v-model="form.mobile"  placeholder="请输入手机号">
                   <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>

                   </el-input>
              </el-form-item>

              <div class="code">

              <el-form-item style="margin-left:-80px" prop="code">
                 <el-input v-model="form.code" @keyup.enter="chackinp(form)" class="left-i" placeholder="请输入密码">
                    <i slot="prefix" class="el-input__icon el-icon-key"></i>
                 </el-input>
              </el-form-item>

              <el-form-item style="margin-left:-80px" >
                   <el-button  class="right-r">发送激活码</el-button>
              </el-form-item>
                <!-- <el-button>发送激活码</el-button> -->

            </div>

            <div class="xybox">
            <el-form-item style="margin-left:-80px;" prop="checked">

                 <el-checkbox  v-model="form.checked"></el-checkbox>
                 <span class="xieyi">我已阅读并同意用户协议和隐私条款</span>

            </el-form-item>
            </div>

            <el-button class="btn" :loading="flag" @click="login(form)" type="primary">登录</el-button>

        </el-form>
    </div>

</div>
</template>
<script>
import '../assets/js/gt'
export default {
  created () {
    document.onkeypress = (e) => {
      if (e.keyCode === 13) {
        this.login(this.form)
      }
    }
  },
  data () {
    var xieyiTest = function (rule, value, callback) {
      value ? callback() : callback(new Error('请遵守规矩'))
    }
    return {
      flag: false,
      form: {
        mobile: '16608519866',
        code: '246810',
        checked: false
      },
      chackform: {
        code: [
          { required: true, message: '请输入密码' }
        ],
        mobile: [
          { required: true, message: '请输入手机号' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码不对' }
        ],
        checked: [
          { validator: xieyiTest }
        ]
      }
    }
  },
  methods: {
    open2 () {
      this.$message({
        message: '登录成功！',
        type: 'success',
        duration: 1000
      })
    },
    open4 () {
      this.$message.error({
        message: '登录密码错误',
        duration: 1000
      })
    },
    login (form) {
      this.flag = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          // this.chackUser()
          this.cahckGee()
        } else {
          this.flag = false
          console.log('error submit!!')

          return false
        }
      })
      // console.log(this.$refs.form)
    },
    cahckGee () {
      var that = this
      var pro = this.$http.get('/captchas/' + this.form.mobile)
      pro
        .then((res) => {
          let { data } = res.data
          console.log(data)

          window.initGeetest({
            // 以下配置参数来自服务端 SDK
            gt: data.gt,
            challenge: data.challenge,
            offline: !data.success,
            new_captcha: true,
            product: 'bind'
          }, function (captchaObj) {
            captchaObj.onReady(function () {
              captchaObj.verify()
              that.flag = false
              // 验证码ready之后才能调用verify方法显示验证码
            }).onSuccess(function () {
              // your code
              // console.log(this)

              that.chackUser()
            }).onError(function () {
              // your code

            })
            // 按钮提交事件
            // button.click = function () {
            //   // some code
            //   // 检测验证码是否ready, 验证码的onReady是否执行
            //   captchaObj.verify() // 显示验证码
            //   // some code
            // }
            // 这里可以调用验证实例 captchaObj 的实例方法
          })
          // console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    chackUser () {
      var pro = this.$http.post('/authorizations', this.form)
      pro
        .then((res) => {
          // console.log(res.data)
          window.sessionStorage.setItem('userinfo', JSON.stringify(res.data.data))

          if (res.data.message === 'OK') {
            this.open2()
            this.$router.push('/home')
          }
        })
        .catch((err) => {
          console.log(err)

          this.open4()
        })
    }
    // resetForm (form) {
    //   this.$refs.form.resetFields()
    // }
  }
}
</script>
<style lang='less' scoped>
.app{

    height: 100%;
    position: absolute;
    width: 100%;
     display: flex;
     justify-content: center;
    align-items: center;
    background:url('../assets/img/login_bg.jpg');
    background-size: cover;
    .box{

        .form-box{
          img{
            width: 230px;
            margin: 30px;
          }
            width: 85%;
            margin: 0 auto;
        }
        margin: 0 auto;
        width: 50%;

        .code{
            margin-top: 18px;
            display: flex;
            justify-content: space-between;
            margin-bottom: -10px;
        }
        .left-i{
            display: inline-block;
            width: 350px;
            margin-right: 18px;
        }
        .btn{
            // margin-top: -18px;
            width: 100%;
        }
      .xybox{
        span{
          margin-left: 10px;
          font-size: 14px;
        }
        text-align: left;
        // margin-top: 18px;
      }
        width: 580px;
        height: 360px;
        background: #fff;

    }
}
</style>
